<template>
    <div v-if="list" class="antiSeal shadow">
        <div class="adaptive-container">
            <div class="item disFlex vertical">
                <div class="item-title">配置</div>
                <!-- <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span">域名动态跳转</div>
                        <RadioGroup v-model="list.appConfigMallInfo.wap_dynamic_domain" @on-change="changeJumpFn">
                            <Radio label="1">
                                <span>开启</span>
                            </Radio>
                            <Radio label="0">
                                <span>关闭</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                    <div class="des disFlex Flex-middle">
                        <div class="item-span">　</div>
                        <div>开启后，可支持分享出去的被封域名正常访问，应对微信封杀</div>
                    </div>
                </div> -->
                <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span">H5开发者密钥</div>
                        <Input v-model="list.wechatInfo.access_appsecret" placeholder="" style="width: 300px" />
                    </div>
                    <div class="des disFlex Flex-middle">
                        <div class="item-span">　</div>
                        <div>用于调用接口；<span style="color: #358fe4; cursor: pointer;" @click="getKey">查看如何获取密钥</span></div>
                    </div>
                </div>
    
                <div class="item-content disFlex Flex-middle">
                        <div class="item-span">设置限制区域</div>
                        <div class="disFlex Flex-middle">
                            <Select v-model="provinceCode" style="width:100px" @on-change="provinceFn">
                                <Option value="-1">全部</Option>
                                <Option v-for="(item,key,index) in cityData" :key="index" :value="item.name">{{item.name}}</Option>
                            </Select>
                            <Select v-model="areaCode" style="width:100px;margin-left: 15px;" @on-change="cityFn">
                                <Option value="-1">全部</Option>
                                <template v-if="provinceCode != -1">
                                    <Option v-for="(item,key,index) in (this.data3)[0].sub" :key="index" :value="item.code">{{item.name}}</Option>
                                </template>
                            </Select>
                            <Button type="primary" style="margin-left: 15px;" @click="comfirmCityFn">添加</Button>
                        </div>
                </div>
                <div class="item-content disFlex Flex-middle">
                    <div class="item-span"></div>
                    <div class="disFlex Flex-middle flex-wrap">
                        <Tag v-for="(item,index) in obj" :key="index" type="dot" closable color="primary" @on-close="obj.splice(index, 1)">{{item.name}}</Tag>
                    </div>
                </div>

                <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span">设置限制时间</div>
                        <!-- <div class="disFlex Flex-middle">
                            <Input style="width: 100px;" v-model="distribution_status_hold_time" />
                        </div> -->
                        <div class="disFlex Flex-middle">
                             <TimePicker v-model="limitTime" format="HH:mm" type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
                        </div>
                    </div>
                </div>

                <div class="disFlex Flex-middle" style="margin: 15px 0 30px 30px;">
                    <Button type="primary" @click="saveSetFn">保存</Button>
                </div>
            </div>
            <div class="item disFlex vertical" style="padding-bottom: 30px;">
                <div class="item-title">平台域名管理</div>
                <div class="describe disFlex vertical">
                    <span>注意事项:</span>
                    <div>1、添加域名无需以 http:// 或者 https:// 开头（例如：h5.banchengyun.com）;</div>
                    <div>2、H5域名解析添加A记录：47.96.41.82;</div>
                    <div>3、在微信服务号后台公众号设置＞功能设置＞设置业务域名和JS接口安全域名（例如：h5.banchengyun.com）;</div>
                    <div>4、在微信商户平台后台＞产品中心＞开发配置＞添加支付授权目录 https://api.banchengyun.com/mall/order/  ;</div>
                    <div>5、点击启用。</div>
                </div>
                <div class="add-url disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <Button type="primary" @click="addUrlFn">添加域名</Button>
                    </div>
                    <Table :columns="columns1" :data="list.domainList" style="margin-top: 30px;"></Table>
                </div>
            </div>
        </div> 
        <Modal
            v-model="codeData.off"
            title="推广二维码"
            @on-ok="ok"
            @on-cancel="cancel">
            <div class="disFlex vertical Flex-middle">
                <img :src="codeData.img">
                <div class="disFlex Flex Flex-middle Flex-center" style="width: 100%;">
                    <span style="margin-right: 15px;">商城链接</span>
                    <Input v-model="codeData.link" style="width: 300px;" />
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
    // 列表请求/删除列表请求
    import {antiSeal,dynamicDomainState,addUrl,removeUrl,setUrl,openUrl} from 'api/setting'
    import  cityData  from "common/js/city"

    export default {
        name: 'antiSeal',
        data(){
            return {
                columns1: [
                    {
                        title: '域名',
                        key: 'domain'
                    },
                    {
                        title: '使用状态',
                        render: (h, params) => {
                            return h('span',{
                                style: {
                                    color: params.row.is_using == 0 ? 'red' : 'green',
                                },
                            }, params.row.is_using == 0 ? '未使用' : '已使用');
                        }
                    },
                    {
                        title: '是否解析',
                        render: (h, params) => {
                            return h('span', {
                                style: {
                                    color: params.row.resoluteState == 0 ? 'red' : 'green',
                                },
                            },params.row.resoluteState == 0 ? '未使用' : '已使用');
                        }
                    },
                    {
                        title: 'JS绑定域名',
                        key: 'domain'
                    },
                    {
                        title: '创建时间',
                        key: 'timeCreateFormat'
                    },
                    {
                        title: '推广链接',
                        render: (h, params) => {
                            return h('div', {
                                attrs: {
                                    class: 'disFlex Flex-middle'
                                },
                                style: {
                                    display: params.row.is_using == 1 ? 'flex' : 'none!important'
                                },
                            },[
                                h('img', {
                                    attrs: {
                                        src: this.list.qrCode,
                                    },
                                    style: {
                                        width: '75px',
                                        height: '75px',
                                        marginRight: '15px',
                                        cursor: 'pointer',
                                    },
                                    on: {
                                        click: () => {
                                            this.codeData.off = true
                                            this.codeData.img = this.list.qrCode
                                            this.codeData.link = this.list.qrCodePath
                                        }
                                    }
                                }),
                                h('span', '点击查看大图')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        width: 230,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.setUrlFn(params.row.domain_id,params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: params.row.is_using == 1 ? 'inline-block' : 'none'
                                    },
                                }, '已启用'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display: params.row.is_using == 0 ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: `是否开启域名`,
                                                onOk: () => {
                                                    this.openUrlFn(params.row.domain_id)
                                                },
                                            })
                                        }
                                    }
                                }, '启用'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: `是否删除此域名`,
                                                onOk: () => {
                                                    this.removeFn(params.row.domain_id,params.index)
                                                },
                                            })
                                        }
                                    }
                                }, '删除')
                            ],);
                        }
                    },
                ],
                limitTime: "",
                list: null,
                //渲染省级
                cityData: cityData,
                //渲染地市级
                data3: null,
                //渲染tag
                obj: [],
                showTag: null,
                provinceCode: -1,
                areaCode: -1,
                addUrlText: '',
                areaLimitRange: "",
                formatlimitTime: '',
                range: "",
                

                // 二维码图片
                codeData: {
                    off: false,
                    img: '',
                    link: '',
                }
            }
        },
        created(){
            this.init()
        },
        methods: {
            init(){
                antiSeal({debug: true}).then(_data => {
                    // console.log(_data)
                    if(_data.status == 'ok'){
                        _data.data.appConfigMallInfo.wap_dynamic_domain = _data.data.appConfigMallInfo.wap_dynamic_domain + ""

                        this.list = _data.data
                        this.limitTime = _data.data.appConfigMallInfo.subscribe_time_range.split("-")
                        this.range = _data.data.appConfigMallInfo.area_limit_range.split(",")
                        let obj = this.obj
                        let range = this.range
                        // let range = "140100,150100,150200".split(",")
                        
                        for(var i = 0, l = range.length; i < l; i++) {
                            cityData.forEach(item => {
                                if(item.code.slice(0, 2) == range[i].slice(0, 2)) {
                                    let res1 = item.name
                                    item.sub.forEach(item => {
                                        if(item.code == range[i]) {
                                            let res = {
                                                code: item.code,
                                                name: `${res1}${item.name}`
                                            }
                                            obj.push(res)
                                            // console.log(res)                                   
                                        }

                                    })
                                }
                            })
                        }
                       
                    }
                }).catch(_err => {
                    // console.log(_err)
                })
            },

            // 添加域名
            addUrlFn(){
                this.addUrlText = ''
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.addUrlText,
                                autofocus: true,
                                placeholder: '请输入域名'
                            },
                            on: {
                                input: (val) => {
                                    this.addUrlText = val;
                                }
                            }
                        })
                    },
                    title: '请输入域名信息',
                    onOk: () => {
                        this.axiosFn()
                    }
                })
            },

            // 添加域名
            axiosFn(){
                let params = {
                    domain: this.addUrlText 
                }
                addUrl(params).then(_data => {
                    window.location.reload()
                }).catch(_err => {
                    this.$Message.error(JSON.stringify(_err));
                })
            },

            // 删除域名
            removeFn(_id,_index){
                let params = {
                    domainId: _id
                }
                removeUrl(params).then(_data => {
                    if(_data.status == 'ok'){
                        this.list.domainList.splice(_index,1)
                        this.$Message.success('操作成功');
                    }
                }).catch(_err => {
                    this.$Message.error(JSON.stringify(_err));
                })
            },

            // 开启域名
            openUrlFn(_id,_index){
                let params = {
                    domainId: _id
                }
                openUrl(params).then(_data => {
                    window.location.reload()
                }).catch(_err => {
                    this.$Message.error(JSON.stringify(_err));
                })
            },

            // 编辑域名
            setUrlFn(_id,_index){
                let saveUrl = this.list.domainList[_index].domain
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.list.domainList[_index].domain,
                                autofocus: true,
                                placeholder: '请输入域名'
                            },
                            on: {
                                input: (val) => {
                                    this.list.domainList[_index].domain = val;
                                }
                            }
                        })
                    },
                    title: '请输入修改域名',
                    onOk: () => {
                        let params = {
                            domain: this.list.domainList[_index].domain,
                            domainId: _id
                        }
                        setUrl(params).then(_data => {
                            this.$Message.success('操作成功');
                        }).catch(_err => {
                            this.$Message.error(JSON.stringify(_err));
                        })
                    },
                    onCancel: () => {
                        this.list.domainList[_index].domain = saveUrl;
                    }
                })
            },

            // 保存配置
            saveSetFn(){
                
                this.areaLimitRange = (this.obj.map(item => {return item.code})).toString()
                
                if((this.limitTime[0]).length) {
                    this.formatlimitTime = this.limitTime.join("-")
                } else {
                    this.formatlimitTime = ""
                }
                let params = {
                    state: 0 || this.list.appConfigMallInfo.wap_dynamic_domain,
                    accessAppsecret: this.list.wechatInfo.access_appsecret,
                    subscribeTimeRange: this.formatlimitTime,
                    areaLimitRange: this.areaLimitRange,
                    debug: true
                }
                dynamicDomainState(params).then(_data => {
                    this.$Message.success('保存成功')
                    
                }).catch(_err => {
                    this.$Message.error('保存失败')
                })
            },
            

            // 域名动态跳转
            changeJumpFn(_data){
                this.list.appConfigMallInfo.wap_dynamic_domain = _data
            },

            // 获取密钥
            getKey(){
                window.open("http://file.open.chihe.so/video/%E8%AE%A2%E9%98%85%E5%8F%B7%E5%AF%86%E9%92%A5.png"); 
            },
             // 省改变
            provinceFn(e){
                this.provinceCode = e
                this.areaCode = -1
                this.data3 = this.cityData.filter((item) => {
                    return item.name == e
                })
            },
            comfirmCityFn() {
                let res = {
                    name: `${this.provinceCode}${this.showTag[0].name}`,
                    code: this.areaCode
                }
                this.obj.push(res)
                // console.log(this.obj)
            },
            cityFn(e) {
                this.showTag = ((this.data3)[0].sub).filter(item => {
                    return item.code == e
                })
            }
        }
     }
</script>

<style scoped lang="less">
    .antiSeal {
        margin: 24px;
        box-sizing: border-box;
    } 

    // 自适应容器
    .adaptive-container {
        background: #fff;

        .item {
            width: 100%;

            .item-title {
                background: #f8f8f9;
                padding: 15px 30px;
                box-sizing: border-box;
                font-size: 12px;
                font-weight: bold;
                color: #464c5b;
            }

            .item-content {
                padding: 15px 30px;
                box-sizing: border-box;

                .item-span {
                    width: 100px;
                }

                .des {
                    margin-top: 10px;
                }
            }

            &>.describe {
                width: calc(100% - 60px);
                background: #eee;
                padding: 30px;
                margin: 30px;
                line-height: 30px;
            }

            &>.add-url {
                padding: 0 30px;
                box-sizing: border-box;
            }
        }
    } 

    .footer-div {
        width: 100%;
        background: #fff;
        padding: 15px 0;
        box-sizing: border-box;
        border-top: 1px solid #ddd;
    }
</style>

<style type="text/css">

    .antiSeal .ivu-table-title {
        border-bottom: 1px solid #eeeeee;
    }
    
    .antiSeal .ivu-table:before {
        display: none!important;
        background-color: transparent!important;
    } 

    .antiSeal .ivu-table:after {
        width: 0!important;
        height: 100%!important;
        background: transparent!important;
        display: none!important;
    }

    .antiSeal .ivu-table-wrapper {
        border: none!important;
    }

    .antiSeal tr span {
        font-size: 12px!important;
    }

</style>